<h1>Listing Birds</h1>
<ul id="birds"> <% @birds.each do |bird| %>
  <li id="bird_<%= bird.position %>"><span class="handle">[drag]</span><%= bird.common_name %></li>
<% end %></ul>

<% content_for :javascript do %>
<%= javascript_tag do %>
// Sorting the list

$(document).ready(function(){
$('#books').sortable({
axis: 'y',
dropOnEmpty: false,
handle: '.handle',
cursor: 'crosshair',
items: 'li',
opacity: 0.4,
scroll: true,
update: function(){
$.ajax({
type: 'post',
data: $('#books').sortable('serialize'),
dataType: 'script',
complete: function(request){
$('#books').effect('highlight');
},
url: '/books/sort'})
}
});
});
<% end %>
<% end %>